<template>
  <aside class="sidebar">
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      @select="handleMenuSelect"
    >
      <el-menu-item index="discover">
        <el-icon><icon-menu /></el-icon>
        <span>发现</span>
      </el-menu-item>
      <el-menu-item index="publish">
        <el-icon><plus /></el-icon>
        <span>发布</span>
      </el-menu-item>
      <el-menu-item index="notification">
        <el-icon><bell /></el-icon>
        <span>通知</span>
      </el-menu-item>
      <el-menu-item index="message" v-if="!isLoggedIn" >
        <el-icon><ChatDotSquare /></el-icon>
        <span>消息</span>
      </el-menu-item>
      <el-menu-item index="mybase"
        v-if="!isLoggedIn" 
      >
        <!-- <el-icon><user /></el-icon> -->
        <el-avatar :size="25" :src="avatar" style="margin-right: 10px;"/>
        <span>我的</span>
      </el-menu-item>

      
      <!-- 添加登录按钮 -->
      <el-menu-item 
        v-if="isLoggedIn" 
        class="login-button"
        @click="showLoginDialog = true"
      >
        <el-icon><user-filled /></el-icon>
        <span>登录</span>
      </el-menu-item>
    </el-menu>
    
    <!-- 登录弹窗 -->
    <el-dialog
      v-model="showLoginDialog"
      title="登录"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            autocomplete="off" 
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showLoginDialog = false">取消</el-button>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </span>
      </template>
    </el-dialog>
  </aside>
</template>

<script setup>
import { ref, computed,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElForm, ElFormItem, ElInput, ElButton, ElCard,ElMessage  } from 'element-plus';
import request from '../utils/request';
import { 
  Menu as IconMenu,
  Plus,
  Bell,
  User,
  ChatDotSquare,
  UserFilled
} from '@element-plus/icons-vue'
  import { useUserStore } from '../utils/userStore'   //npm install pinia
  const userStore = useUserStore()

const router = useRouter()
const route = useRoute()
//const userStore = useUserStore()
const avatar = ref('')
const activeMenu = ref('')
const showLoginDialog = ref(false)
const loginForm = ref({
  username: '',
  password: ''
})

const isLoggedIn =  ref(true)

// watch(
//   () => route.path,
//   (newPath) => {
//     activeMenu.value = newPath.split('/')[1] || 'discover'
//   },
//   { immediate: true }
// )

const handleMenuSelect = (index) => {
  router.push(`/${index}`)
}

const handleLogin = async () => {
  try {
    //await userStore.login(loginForm.value)
    debugger;
    const user = await request.post('/sys/logininfor/login',loginForm.value );
    const token = user.data.token;
    avatar.value = user.data.user.avatar;
    localStorage.setItem('token', token);
    localStorage.setItem('user', user.data.user);
    userStore.setUser(user.data.user);
    showLoginDialog.value = false
    isLoggedIn.value = false
    ElMessage.success('登录成功')

  } catch (error) {
    localStorage.removeItem('token');
    ElMessage.error(error.message || '登录失败')
  }
}

watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath.split('/')[1] || 'discover';
  },
  { immediate: true }  // 初始化时立即执行
);

const handleClose = (done) => {
  loginForm.value = { username: '', password: '' }
  done()
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #eee;
}

.sidebar-menu {
  border-right: none;
}

.sidebar-menu :deep(.el-menu-item) {
  height: 56px;
  line-height: 56px;
  font-size: 16px;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  color: #ff2442;
  background-color: #fff0f0;
}

.login-button {
  margin-top: 20px;
  border-top: 1px solid #eee;
}
</style>